import { Button, Card, Form, Input, Radio, Table } from 'antd'
import React, { useEffect, useState } from 'react'
import { SearchOutlined, DeleteOutlined, FormOutlined } from '@ant-design/icons'
import { reqGetHospitalSetList, reqRemoveHospital, reqRemoveHospitalList } from '@/api/hospital/hospitalSet'
import {
  HospitalSetItem,
  HospitalSetList,
} from '@/api/hospital/model/hospitalSetType'
import { useForm } from 'antd/lib/form/Form'
import { useNavigate } from 'react-router-dom'

function HoseitalList() {
  // 创建数据总数
  let [total, setTotal] = useState(0)
  // 创建axios请求到的数据,用于react渲染页面
  let [data, setData] = useState<HospitalSetList>()
  // 获取当前页码,向后端发请求获取新的数据
  let [page, setPage] = useState(1)
  // 和页码混合使用,根据当前页面长度获取对应的数据
  let [limit, setLimit] = useState(5)
  // 加载动画,设置在页面请求时table框为加载状态
  let [loading, setLoading] = useState(false)
  // 创建表单用于获取数据
  let [form] = useForm()
  // 使用编程式跳转
  let navigate = useNavigate()
  // 
  // 
  let [changeList, setchangeList] = useState<React.Key[]>([])
  // const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
  // 调用axios请求函数
  async function GetResponHospitalSet() {
    let { hoscode, hosname } = form.getFieldsValue()
    setLoading(true)
    let result = await reqGetHospitalSetList({ page, limit, hoscode, hosname })
    setLoading(false)
    setData(result.records)
    setTotal(result.total)
  }
  let goAdd = function () {
    navigate("/syt/hospital/hospitalSet/add")
  }
  function remove(id: number) {
    return async () => {
      await reqRemoveHospital(id)
      GetResponHospitalSet()
    }
  }
  async function change(changeList: React.Key[]) {
    console.log(changeList);
    setchangeList(changeList)
    // await reqRemoveHospitalList(changeList)
    // GetResponHospitalSet()
  }
  async function removeList() {
    await reqRemoveHospitalList(changeList)
    GetResponHospitalSet()
  }
  useEffect(() => {
    GetResponHospitalSet()
    console.log(data);

  }, [page, limit])
  const columns: any[] = [
    {
      title: 'id',
      render: (a: HospitalSetItem, b: HospitalSetItem, index: number) => {
        return index + 1
      },
      width: '60px',
    },
    {
      title: 'id',
      render: (a: HospitalSetItem, b: HospitalSetItem, index: number) => {
        return index + 1
      },
      width: '60px',
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
      key: 'hosname',
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode',
      key: 'hoscode',
    },
    {
      title: 'api基础路径',
      dataIndex: 'apiUrl',
      key: 'apiUrl',
    },
    {
      title: '签名',
      dataIndex: 'signKey',
      key: 'signKey',
    },
    {
      title: '联系人姓名',
      dataIndex: 'contactsName',
      key: 'contactsName',
    },
    {
      title: '联系人手机',
      dataIndex: 'contactsPhone',
      key: 'contactsPhone',
    },
    {
      title: '操作',
      render: (rowkey: HospitalSetItem) => {
        return (
          <div>
            <Button type="primary" icon={<FormOutlined />} onClick={() => {
              navigate(`/syt/hospital/hospitalSet/setid/${rowkey.id}`)
            }}></Button>
            <Button
              danger
              className="ml-20"
              type="primary"
              icon={<DeleteOutlined />}
              onClick={remove(rowkey.id)}
            ></Button>
          </div >
        )
      },
      fixed: 'right',
      width: '120px',
    },
  ]
  return (
    <div>
      <Card>
        <Form
          form={form}
          layout="inline"
          name="basic"
          onFinish={GetResponHospitalSet}
          onReset={GetResponHospitalSet}
        >
          {/*  获取值需要给input框添加name */}
          <Form.Item name="hosname">
            <Input placeholder="医院名称" />
          </Form.Item>

          <Form.Item name="hoscode">
            <Input placeholder="医院编号" />
          </Form.Item>

          <Form.Item
            valuePropName="checked"
            wrapperCol={{ offset: 8, span: 16 }}
          ></Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
              搜索
            </Button>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="default" htmlType="reset">
              取消
            </Button>
          </Form.Item>
        </Form>
        <div className="mt-20">
          <Button type="primary" onClick={goAdd} >
            添加
          </Button>
          <Button className="ml-20" onClick={removeList} disabled={changeList.length === 0} type="primary" htmlType="submit">
            批量删除
          </Button>
        </div>
        <Table
          loading={loading}
          rowKey={'id'}
          pagination={{
            current: page,
            total: total,
            showQuickJumper: true,
            showSizeChanger: true,
            pageSizeOptions: [3, 5, 15],
            pageSize: limit,
            showTotal: (total) => {
              return <span>当前总数是{total}</span>
            },
            onChange: (page: number, pageSize: number) => {
              setPage(page)
              setLimit(pageSize)
            },
          }}
          className="mt-20"
          columns={columns}
          dataSource={data}
          bordered
          scroll={{ x: '1700px' }}
          rowSelection={{
            // 添加多选框
            type: "checkbox",
            onChange: change
          }}
        ></Table>
      </Card>
    </div>
  )
}

export default HoseitalList
